<template>
  <view class="disease-report">
    <text class="tit rbox">填写信息</text>
    <van-cell-group>
      <van-field
        :value="value"
        label="庄园信息"
        placeholder="选择或添加您的庄园"
        border="true"
      />

      <view class="line rbox box_space_b">
        <text class="name">葡萄种类</text>
        <text class="picker-wrap" @tap="show = true">{{
          info || "请选择(此处可多选)"
        }}</text>
      </view>
      <multiple-select
        v-model="show"
        :data="list"
        :default-selected="defaultSelected"
        @confirm="confirm"
      ></multiple-select>

      <van-field
        :value="value"
        label="发现时间"
        placeholder="请输入庄园面积"
        border="true"
      />

      <view class="line rbox box_space_b">
        <text class="name">一周内是否有雨</text>
        <picker
          mode="selector"
          :range="array"
          :value="arrIdx"
          class="picker-wrap"
          @change="listenerPickerSelected"
        >
          <text>{{ array[arrIdx] }}</text>
        </picker>
      </view>

      <view class="line rbox box_space_b">
        <text class="name">病害名称</text>
        <picker
          mode="selector"
          :range="array"
          :value="arrIdx"
          class="picker-wrap"
          @change="listenerPickerSelected"
        >
          <text>{{ array[arrIdx] }}</text>
        </picker>
      </view>

      <view class="sketch-wrap">
        <text class="sketch-tit">病状描述</text>
        <textarea class="sketch" placeholder="请描述病害症状" />
      </view>
    </van-cell-group>

    <view class="upload-img">
      <text class="upload-img-tit">请上传图片</text>
      <sunuiUpimg></sunuiUpimg>
    </view>

    <view class="single-btn btn-normal rbox box_center btn-position"
      >提交信息</view
    >
  </view>
</template>

<script>
import multipleSelect from "../../components/multiple-select/multiple-select"
import { vanField } from "../../wxcomponents/vant/field/index.js"
import sunuiUpimg from "../../components/sunui-upimg/sunui-upimg"
export default {
  data() {
    return {
      value: '',
      array: ['请选择', '小雨', '中雨', '大雨', '暴雨'],
      arrIdx: 0,
      show: false, //是否显示 - 双向绑定
      info: "",
      list: [], //数据源
      defaultSelected: ["3", "5"], //默认选中项
    }
  },
  components: {
    vanField,
    multipleSelect,
    sunuiUpimg
  },
  methods: {
    listenerPickerSelected: function (e) {
      this.arrIdx = e.detail.value
    },
    confirm(data) {
      console.log(data);
      this.info = data.map(el => el.label).join(",");
    }
  },
  onShow() {
    //模拟异步数据
    setTimeout(() => {
      this.list = [
        {
          label: "白葡萄",
          value: "1"
        },
        {
          label: "红葡萄",
          value: "2",
          disabled: true //禁用
        },
        {
          label: "新疆葡萄",
          value: "3"
        },
        {
          label: "进口葡萄",
          value: "4"
        },
        {
          label: "有机葡萄",
          value: "5"
        }
      ];
    }, 1000);
  },
}
</script>

<style lang="scss" scoped>
.disease-report {
  .tit {
    padding: 0 42rpx;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    font-size: 40rpx;
    line-height: 1;
    color: #333;
  }
  .line {
    position: relative;
    padding: 20rpx 30rpx;
    &::after {
      position: absolute;
      box-sizing: border-box;
      -webkit-transform-origin: center;
      transform-origin: center;
      content: " ";
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .name {
      color: #646566;
    }
    .picker-wrap {
      color: #646566;
      width: 60%;
      text-align: center;
    }
  }
  &.success {
    position: relative;
    height: 100vh;
    .user-tip {
      .iconfont {
        margin-top: 182rpx;
        width: 170rpx;
        height: 170rpx;
        font-size: 80rpx;
        font-weight: 800;
        color: #fff;
        background-color: #1de1c3;
        border-radius: 50%;
      }
      .msg {
        margin-top: 38rpx;
        font-size: 36rpx;
        line-height: 1;
        color: #1de1c3;
      }
      .tip {
        margin-top: 18rpx;
        font-size: 24rpx;
        line-height: 1;
        color: #6d6d6d;
      }
    }
    .phone-num {
      position: absolute;
      bottom: 228rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      line-height: 1;
      color: #6d6d6d;
    }
  }
  /deep/ .van-field__input--textarea {
    text-align: center;
  }
  /deep/ .van-field__input {
    text-align: center !important;
  }
  .sketch-wrap {
    padding: 0 30rpx;
    margin-top: 20rpx;
    .sketch-tit {
      font-size: 28rpx;
      line-height: 1;
      color: #646566;
    }
    .sketch {
      margin-top: 20rpx;
      padding: 22rpx 30rpx;
      min-height: 260rpx;
      background: #ffffff;
      border: 2rpx solid #e9e9e9;
      box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
      border-radius: 30rpx;
      width: 100%;
      box-sizing: border-box;
    }
  }
  .upload-img {
    padding: 0 30rpx;
    margin-top: 20rpx;
    .upload-img-tit {
      font-size: 28rpx;
      line-height: 1;
      color: #646566;
    }
  }
}
</style>
